<template>
  <div class="traceDetail">
    <ul class="list">
      <li>商品ID：{{$route.query.id}}</li>
      <li>商品名称：{{goodsInfo.goodsName}}</li>
      <li>商品类别：{{goodsInfo.goodKindFirst}}/{{goodsInfo.goodsKindSecond}}</li>
      <li>香型：{{goodsInfo.odorType}}</li>
      <li>净含量：{{goodsInfo.netContent}}</li>
      <li>单位：{{goodsInfo.unit}}</li>
      <li>产地：{{goodsInfo.productPlace}}</li>
    </ul>
    <h3>溯源信息：
      <el-button plain size="medium" @click="$router.go(-1)">返回</el-button>
    </h3>
    <el-steps direction="vertical" :active="sourceInfo.length" :space="60">
      <el-step v-for="(item,index) in sourceInfo" :key="index">
        <div slot="title" class="step-title">
          <span>{{item.createTime}}</span>
          <span>{{item.nodeDesc}}</span>
        </div>
      </el-step>
    </el-steps>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsInfo: {},
      sourceInfo: [],
    }
  },
  mounted() {
    this.getDetailData();
  },
  methods: {
    async getDetailData() {
      let { data } = await this.$post({
        api: '/show/goods/source',
        data: {
          goodsId: this.$route.query.id
        }
      });
      if (data.code === 0) {
        this.goodsInfo = data.data.goodsInfo[0];
        this.sourceInfo = data.data.sourceInfo;
      } else {
        this.$message({
          type: 'error',
          message: data.msg
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.traceDetail {
  padding: 15px;
}
.list {
  border-bottom: 1px solid #eeeeee;
  overflow: hidden;
  padding: 15px 20% 15px 15px;
  li {
    float: left;
    width: 20%;
    line-height: 40px;
  }
}
h3 {
  margin: 10px 0;
  padding-left: 15px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  .el-button {
    margin-left: 100px;
  }
}
.el-steps {
  margin: 30px 0 0 50px;
  .step-title span {
    margin: 0 10px;
  }
}
</style>